<template>
  <div class="home-type home-hot" ref="scrollEle">
    <HomeHotSwiper/>
    <HomeHotNav/>
    <HomeHotSpecialPrice/>
    <HomeHotContent/>
    <div class="go-top" :class="{active: flag}" @click="goTop">
      <span class="top">顶部</span>
    </div>
  </div>
</template>

<script>
  import HomeHotSwiper from "./HomeHotSwiper";
  import HomeHotNav from "./HomeHotNav";
  import HomeHotSpecialPrice from "./HomeHotSpecialPrice";
  import HomeHotContent from "./HomeHotContent";

  export default {
    name: "HomeHot",
    data() {
      return {
        flag: false,
        isScrolling: false,
      };
    },
    methods: {
      goTop() {
        if (!this.isScrolling) {
          this.isScrolling = true;
          let step = this.$refs.scrollEle.scrollTop / 50;
          let timerId;
          let scrolling = () => {
            if (this.$refs.scrollEle.scrollTop - step <= 0) {
              this.$refs.scrollEle.scrollTop = 0;
              this.isScrolling = false;
            } else {
              this.$refs.scrollEle.scrollTop -= step;
              this.timerId = setTimeout(scrolling, 5);
            }
          };
          scrolling();
        }
      },
      bindEvent() {
        this.$refs.scrollEle.addEventListener('scroll', (e) => {
          this.flag = e.target.scrollTop > e.target.clientHeight;
        });
      },
    },
    mounted() {
      this.bindEvent();
    },
    components: {HomeHotContent, HomeHotSpecialPrice, HomeHotNav, HomeHotSwiper}
  }
</script>

<style scoped lang='scss'>
  .home-hot {
  }
  .go-top {
    position: fixed;
    right: 20px;
    bottom: -64px;
    width: 42px;
    height: 42px;
    opacity: 0;
    background: url();
    background-size: contain;
    z-index: 2;
    transition: all .8s ease-out;
    &.active {
      bottom: 64px;
      opacity: 1;
    }
    .top {
      position: absolute;
      bottom: 7px;
      width: 100%;
      height: 12px;
      line-height: 12px;
      text-align: center;
      font-size: 10px;
      color: #333;
    }
  }
</style>
